<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="list">
        <!-- 数据总计区域 start -->
         <el-row>
          <el-col :span="18">
            <el-col :span="4" style="margin-right:10px;">
              <el-select @change="selectChargeType" clearable v-model="query.type" placeholder="请选择类型">
                <el-option v-for="item in chargeData" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-col>
            <el-col :span="4">
              <el-input v-model="query.instrument_num" @change="selectName" clearable placeholder="请输入仪器编号"></el-input>
            </el-col>
          </el-col>
          <el-col :span="6">
            <el-button size="small" style="margin-bottom: 10px;float:right" type="primary" @click="add()">添加</el-button>
          </el-col>
         </el-row>
          <div v-show="!listLoading" class="pagination-container">
          <div style="margin-right: 10px;margin-bottom: 10px;float:left;color:rgb(44,162,252);padding-top: 7px;font-size: 14px">
            数据总计: {{ total }} (条)
          </div>
        </div>

        <el-table
          v-loading.body="listLoading"
          border
          :data="list"
          tooltip-effect="dark"
          style="width: 100%;"
          @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center"> </el-table-column>
          <el-table-column prop="id" label="序号" min-width="80" align="center"></el-table-column>
          <el-table-column prop="instrument_num" label="编号" min-width="120" align="center">
            <template slot-scope="scope">
              <el-tag>{{ scope.row.instrument_num }}</el-tag>
            </template>
          </el-table-column>

          <el-table-column label="类型" min-width="120" align="center">
            <template slot-scope="scope">
              <el-tag type="warning" v-if="scope.row.type == 1">交流</el-tag>
              <el-tag type="warning" v-else>直流</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="仪器版本号" min-width="120" align="center">
            <template slot-scope="scope">
              <el-tag type="danger">{{ scope.row.version_num }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="仪器状态" min-width="120" align="center">
            <template slot-scope="scope">
              <el-button type="success" size="mini" v-if="scope.row.status === 1">正常</el-button>
              <el-button type="danger" size="mini" v-else>维修</el-button>
            </template>
          </el-table-column>
          <el-table-column label="添加时间" min-width="150" align="center" prop="create_time"></el-table-column>

          <el-table-column label="操作" min-width="160" align="center">
             <template slot-scope="scope">
                <el-button type="warning" size="small" @click="update(scope.$index)">编辑</el-button>
                <el-button type="danger" size="small" @click="deleteDialog(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>

        </el-table>

      </div>
      <!-- 分页区域 start -->
      <div v-show="!listLoading" class="pagination-container">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="query.page"
                       :page-sizes="[10, 20, 30, 50]" :page-size="query.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>

      <!-- 添加 删除 模态框-->
      <el-dialog :title="modelText[status]" :visible.sync="formStatus" v-loading.fullscreen.lock="dialogLoading">
        <el-form :model="formData" :rules="rules" ref="formData">
          <el-form-item label="仪器编号" :label-width="formLabelWidth" prop="instrument_num">
            <el-input v-model.trim="formData.instrument_num" placeholder="请输入仪器编号" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="仪器版本号" :label-width="formLabelWidth" prop="version_num">
            <el-input v-model.trim="formData.version_num" placeholder="请输入仪器版本号" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="仪器类型" :label-width="formLabelWidth" prop="type">
            <el-select v-model="formData.type" filterable allow-create placeholder="请选择仪器类型" style="width: 100%;">
              <el-option v-for="item in chargeData" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="仪器状态" :label-width="formLabelWidth">
            <el-switch
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="正常"
              active-value="1"
              inactive-value="2"
              @change="Statusaaa"
              inactive-text="维修"
              v-model="instrument_status">
            </el-switch>
          </el-form-item>


        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="formStatus = false">取 消</el-button>
          <el-button type="primary" v-if="status === 'create'" @click="create()">确 定</el-button>
          <el-button type="primary" v-else @click="editor()">确 定</el-button>
        </div>
      </el-dialog>

    </div>
  </div>
</template>

<script>
  import { instrumentList, createInstrument, deleteInstrument, updateInstrument } from '@/api/api'
  export default {
    data() {
      return {
        total: 10,
        listLoading: false,
        list: [],
        query: { // 列表请求数据
          type: '',
          instrument_num: '',
          page: 1,
          limit: 10 // 每页显示10条
        },
        modelText: {
          'create': '添加检测仪器',
          'update': '编辑信息'
        },
        status: 'create',
        formLabelWidth: '120px',
        dialogLoading: false,
        formStatus: false,
        formData: {
          instrument_num: '',
          type: '',
          version_num: '',
          status: '1',
          is_del: 1,
          id: ''
        },
        instrument_status: '1',
        /** 充电桩类型 */
        chargeData: [
          { id: 1, name: '交流' },
          { id: 2, name: '直流' }
        ],
        /** 验证规则 */
        rules: {
          instrument_num: [{ required: true, message: '请输入仪器编号', trigger: 'blur' }],
          type: [{ required: true, message: '请选择仪器类型', trigger: 'blur' }],
          version_num: [{ required: true, message: '请输入版本号', trigger: 'blur' }]
        }
      }
    },
    methods: {
      // 选择操作
      handleSelectionChange(val) {
        console.log(val)
      },
      // 获取充电桩列表
      fetchList() {
        // 开启加载层
        this.listLoading = true
        instrumentList(this.query).then(response => {
          // 当page不等于1时 判断返回数组是否为空
          if (!response.data && this.query.page !== 1) {
            // 当前页－1
            this.query.page = this.query.page - 1
            // 重新获取数据
            this.fetchList()
          } else {
            // 添加列表数据
            this.list = response.data
            // 设置总条数
            this.total = response.count
            // 关闭 加载层
            this.listLoading = false
          }
        })
      },
      /** 展开添加视图 */
      add() {
        console.log(this.formData.status)
        this.status = 'create'
        this.formStatus = true
        this.clear()
        for (var i in this.formData) {
          this.formData[i] = ''
        }
        this.formData.is_del = 1
        this.formData.status = this.instrument_status
      },
      /** 执行添加数据操作 */
      create() {
        this.$refs['formData'].validate((valid) => {
          if (valid) {
            this.listLoading = true
            // 创建
            createInstrument(this.formData).then(response => {
              this.$notify.success({
                title: '信息提示',
                message: '添加成功',
                duration: 3000
              })
              this.formStatus = false
              this.listLoading = false
              this.fetchList()
            }).catch(() => {
              this.listLoading = false
            })
          }
        })
      },
      /** 删除数据操作 */
      deleteDialog(id) {
        this.$confirm('确定删除该数据吗, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteInstrument({ id: id, is_del: 2 }).then(response => {
            this.$notify.success({
              title: '信息提示',
              message: '删除成功',
              duration: 3000
            })
            this.fetchList()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      /** 编辑信息 */
      update(index) {
        this.status = 'update'
        for (const item in this.formData) {
          this.formData[item] = this.list[index][item]
        }
        this.formStatus = true
        this.instrument_status = String(this.formData.status)
      },
      /** 处理编辑信息 */
      editor() {
        this.$refs['formData'].validate((valid) => {
          if (valid) {
            this.formStatus = true
            this.formData.status = this.instrument_status
            // 编辑
            updateInstrument(this.formData).then(response => {
              this.$notify.success({
                title: '信息提示',
                message: response,
                duration: 3000
              })
              this.formStatus = false
              this.listLoading = false
              this.fetchList()
            }).catch(() => {
              this.listLoading = false
            })
          }
        })
      },
      /** 置空数据 **/
      clear() {
        if (this.$refs['formData']) {
          this.$refs['formData'].resetFields()
        }
      },
      // 自定义显示条数
      handleSizeChange(value) {
        // 重新定义每页显示几条
        this.query.page = 1
        this.query.limit = value
        this.fetchList()
      },
      // 页数跳转
      handleCurrentChange(value) {
        this.query.page = value
        this.fetchList()
      },
      // 超出隐藏
      maxSlice(str, maxLength) {
        return str.length > maxLength ? str.slice(0, maxLength) + '...' : str
      },
      Statusaaa(val) {
        // this.formData.status = val
      },
      // 根据类型筛选
      selectChargeType() {
        this.fetchList()
      },
      // 根据名称搜索
      selectName() {
        this.fetchList()
      }
    },
    mounted() {
      this.fetchList() // 自动请求列表
    }
  }
</script>

<style>

</style>
